<template>
	<view class="container pd_l20 font32">
		<view class="head_box">
			<text>头像</text>
			<image :src="person.headUrl" mode=""></image>
		</view>
		<view class="name_box">
			<text>昵称</text>
			<view class="small_box">
				<text class="m_r20 fontcolor">{{person.nickName}}</text>
				<image src="../../static/my_img/arrow_r.png" mode=""></image>
			</view>
		</view>
		<view class="phone_box">
			<text>手机号码</text>
			<text class="fontcolor">{{person.phoneNumber}}</text>
		</view>
		<view class="real_name">
			<text>真实姓名</text>
			<text class="fontcolor">{{person.name}}</text>
		</view>
		<view class="idnum_box">
			<text>身份证号</text>
			<text class="fontcolor">{{person.idNumber}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				person: {
					"headUrl": "../../static/my_img/head_img.png",
					"nickName": "mark",
					"phoneNumber": "18236937830",
					"name": "张青青",
					"idNumber": "41060319990128****"
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		border-top: 1upx solid #F5F4FA;
		.fontcolor {
			color: #6f6f75;
		}
		.head_box,.name_box,.phone_box,.real_name,.idnum_box{
			padding: 30upx 30upx 30upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1upx solid #F5F4FA;
		}
		.head_box{
			image{
				width: 124upx;
				height: 124upx;
			}
		}
		.name_box {
			.small_box{
				display: flex;
				align-items: center;
				image {
					width: 14upx;
					height: 20upx;
				}
			}
		}
	}
</style>
